<template>
  <div class="page">
    <HeaderCom />
    <div class="carousel">
      <img :src="item.url" class="fade-image" :alt="item.id" v-for="item in imgList" :key="item.id" />
      <!-- <div class="motto">
        <div class="motto-text">智如禹汤，不如常耕</div>
        <div class="motto-eng">Wisdom is like Yu Tang, it's better to cultivate regularly</div>
      </div> -->
    </div>
    <div class="bowen">
      <svg
        data-v-6756c784=""
        data-v-d0606624=""
        class="waves"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 24 150 28"
        preserveAspectRatio="none"
        shape-rendering="auto"
      >
        <defs data-v-6756c784="">
          <path
            id="gentle-wave"
            d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
            data-v-6756c784=""
          ></path>
        </defs>
        <g class="parallax" data-v-6756c784="">
          <use class="use" xlink:href="#gentle-wave" x="48" y="0" data-v-6756c784=""></use>
          <use class="use" xlink:href="#gentle-wave" x="48" y="3" data-v-6756c784=""></use>
          <use class="use" xlink:href="#gentle-wave" x="48" y="5" data-v-6756c784=""></use>
          <use class="use" xlink:href="#gentle-wave" x="48" y="7" data-v-6756c784=""></use>
        </g>
      </svg>
    </div>
    <ArticleList />
    <div class="footer">
      <div>作者联系方式WX : He__DL</div>
    </div>
  </div>
</template>

<script setup>
import ArticleList from '@/pages/components/articleList/index.vue';
import HeaderCom from '@/pages/components/header/index.vue';
import { onMounted, onUnmounted, ref } from 'vue';
import bg1 from '/public/images/bg-1.jpg';
import bg10 from '/public/images/bg-10.jpg';
import bg4 from '/public/images/bg-4.jpeg';
import bg5 from '/public/images/bg-5.jpeg';
import bg7 from '/public/images/bg-7.jpeg';
import bg9 from '/public/images/bg-9.jpg';
const currentImage = ref(0);

const imgList = [
  { url: bg1, id: '001' },
  { url: bg4, id: '004' },
  { url: bg5, id: '005' },
  { url: bg7, id: '007' },
  { url: bg9, id: '009' },
  { url: bg10, id: '010' },
];

onMounted(() => {
  changeImage();
});

const timer = ref(null);
const changeImage = () => {
  // 获取所有图片元素
  const images = document.querySelectorAll('.fade-image');
  // 隐藏所有图片
  images.forEach((img) => {
    img.style.opacity = 0;
    img.style.transform = 'scale(1)';
  });
  // 使下一张图片变为可见
  currentImage.value = (currentImage.value + 1) % images.length; // 循环索引
  images[currentImage.value].style.opacity = 1;
  images[currentImage.value].style.transform = 'scale(1.1)';

  // 递归调用自身以创建循环效果
  timer.value = setTimeout(changeImage, 10000); // 每3秒更换一次图片
};

onUnmounted(() => {
  clearTimeout(timer.value);
});
</script>
<style scoped lang="scss">
.page {
  // height: 100vh;
  position: relative;

  .carousel {
    height: 582px;
    position: relative;
    margin: auto;
    overflow: hidden;
    display: flex;
    justify-content: center;
  }

  .motto {
    height: 100px;
    position: absolute;
    top: 30%;
    text-align: center;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    text-shadow: 0 0 10px rgb(0 0 0 / 50%);

    div {
      padding: 10px 0;
    }

    .motto-text {
      margin: 0 auto;
      text-align: center;
      font-weight: bold;
      color: #fff;
      text-shadow: 0 0 10px rgb(0 0 0 / 50%);
      background: linear-gradient(270deg, #ff6a00, #ee0979, #8a2387);
      background-image: linear-gradient(
        left,
        rgb(242 249 247),
        #ddf7e9 10%,
        #a8ecaf 20%,
        #3ce379 30%,
        #ccf 40%,
        #0ff 50%,
        #ccf 60%,
        #53c6dd 70%,
        #2ecde2 80%,
        #6ff 90%,
        rgb(22 181 220) 100%
      );
      -webkit-text-fill-color: transparent;
      background-clip: text;
      background-size: 200% 100%;
      animation: masked-animation 4s linear infinite;
      font-size: 25px;
    }

    .motto-eng {
      font-family: cursive;
      text-shadow: 6px 2px 2px #965959;
      color: rgb(13 199 228);
    }
  }

  /* 所有图片的基本样式 */
  .carousel img {
    position: absolute;
    width: 100%;
    height: 582px;
    opacity: 0; /* 所有图片默认透明 */
    transform: scale(1);
    transition:
      opacity 3s ease-in-out,
      transform 3s ease-in-out; /* 设置透明度变化的动画 */
  }

  .bowen {
    position: relative;

    // top: -300px;
    .waves {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 12vh;
      min-height: 50px;
      max-height: 130px;
      z-index: 1;
    }

    .parallax .use[data-v-6756c784] {
      animation: move-forever-6756c784 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
    }

    .parallax .use[data-v-6756c784]:nth-child(1) {
      animation-delay: -2s;
      animation-duration: 7s;
      fill: rgb(253 253 253 / 70%);
    }

    .parallax .use[data-v-6756c784]:nth-child(2) {
      animation-delay: -3s;
      animation-duration: 10s;
      fill: rgb(253 253 253 / 50%);
    }

    .parallax .use[data-v-6756c784]:nth-child(3) {
      animation-delay: -4s;
      animation-duration: 13s;
      fill: rgb(253 253 253 / 30%);
    }

    .parallax .use[data-v-6756c784]:nth-child(4) {
      animation-delay: -5s;
      animation-duration: 20s;
      fill: #fdfdfd;
    }

    @keyframes move-forever-6756c784 {
      0% {
        transform: translate3d(-90px, 0, 0);
      }

      100% {
        transform: translate3d(85px, 0, 0);
      }
    }

    @media (max-width: 768px) {
      .waves[data-v-6756c784] {
        height: 10vh;
        min-height: 10vh;
      }
    }
  }
}

.footer {
  font-size: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

@keyframes masked-animation {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: -100% 0;
  }
}
</style>
